<template>
  <div class="join">
    <div class="container head">
      <div class="title">
        <h1>九州通医药集团</h1>
        <a href="/">
          <img src="/logo.jpg" alt="">
        </a>
      </div>
      <div class="phone">
        <img src="/concat-2.png" alt="">
      </div>
    </div>
    <hr>
    <div class="nav">
      <el-menu :default-active="activeIndex" class="el-menu-demo container" mode="horizontal" @select="handleSelect" text-color='#777777' router> 
        <el-menu-item index="/1" style="font-size: 16px">首页</el-menu-item>
        <el-submenu :index="'/' + (index+2)" v-for="(item,index) in nav" :key="index">
          <template slot="title">{{item.t}}</template>
          <el-menu-item :index=" '/' + (index+2)+'/' + (index+2)+'-'+(sIndex+1)" v-for="(sItem,sIndex) in item.msg" :key='sIndex'>{{sItem}}</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex: '/1',
      nav: [
        { t: '走进九州通', msg: ['集团概况', '发展历程', '集团领导', '核心竞争力', '企业荣誉',  '物流概况', '党团建设', '公益事业', '领导关怀', '企业大事记'] },
        { t: '新闻中心', msg: ['企业新闻'] },
        { t: '经营与发展', msg: ['公司业务', '质量管理', '营销网络'] },
        { t: '企业文化', msg: ['企业形象定位', '核心理念', '文化精髓', '文化风采', '文化影视廊'] },
        { t: '人力资源', msg: ['人才政策', '培训开发', '职业生涯', '人才招聘', '薪酬福利'] },
        { t: '投资者关系', msg: ['投资者服务', '企业社会责任', '投资者保护', '最新活动', '问答摘要'] },
        { t: '联系我们', msg: ['联系方式'] }
      ]
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    activeIn () {
      this.activeIndex =this.$route.path
      console.log(this.activeIndex)
    }
  },
  mounted () {
    this.activeIn ()
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
.join{
  .head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 95px;
    .title{
      h1{
        font-size: 0;
      }
    }
  }
  hr{
    background-color: #eee;
    border: none;
    height: 1px;
  }
}
</style>

<style lang="scss">
.el-menu--popup-bottom-start{
  display: flex;
  .el-menu-item{
    &:hover{
      color:skyblue !important;
    }
  }
}
.el-submenu__title{
    font-size: 16px !important;
    line-height: 16px;
}
</style>
